import React, {
    Component
} from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    TextInput,
    View,
    ImageBackground,
    Image,
    ToastAndroid,
    Dimensions
} from 'react-native';
import Orientation from 'react-native-orientation';
 import Util from './utils'
export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            show:false,
            ip:"172.20.10.2"
        };
      }
    static navigationOptions = {
          header: null,
          gesturesEnabled: false,
      };
      componentWillUnmount() {
        Orientation.lockToLandscape();
    }
    getIp(){
        let that=this
        storage.load({
            key: 'userinfo',
            // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
            autoSync: true,
            // syncInBackground(默认为true)意味着如果数据过期，
            // 在调用sync方法的同时先返回已经过期的数据。
            // 设置为false的话，则始终强制返回sync方法提供的最新数据(当然会需要更多等待时间)。
            syncInBackground: true,
            // 你还可以给sync方法传递额外的参数
            syncParams: {
                extraFetchOptions: {
                    // 各种参数
                },
                someFlag: true,
            },
        }).then(async ret => {
                that.setState({
                    ip: ret.ip ,
                    username:ret.username,
                    password:ret.password
                })
            
        }).catch(err => {
            //如果没有找到数据且没有sync方法，
            //或者有其他异常，则在catch中返回
            console.log(err)
        })
    }
    componentDidMount(){
        Orientation.lockToLandscape();
        this.getIp()

    }
    _onPressButton(){
        const {navigate} = this.props.navigation
       if(!(this.state.username&&this.state.password&&this.state.ip)){
        ToastAndroid.show('请填写用户名和密码', ToastAndroid.SHORT);

        return
       }
       storage.save({
        key: 'userinfo', // 注意:请不要在key中使用_下划线符号!
        data: {
            ip:this.state.ip,
            username:this.state.username,
            password:this.state.password
        }
        });
        let url = `http://${this.state.ip}:10081/api/auth?userCode=${this.state.username}&password=${this.state.password}`//人力
        let that =this
        Util.get(url, (result) => {
            if(result.status=="200"){
                navigate("AnswearScreen",{userCode:result.data.userCode,userName:result.data.userName,ip:this.state.ip})
            }else{
                ToastAndroid.show('用户名或密码错误', ToastAndroid.SHORT);

            }
        },(error)=>{
            console.log(error)
        })


    }
    _onPressshow(){
        this.setState({
            show:!this.state.show
        })
    }

    render() {
        return ( 
         <View style={[styles.main]}>
            <TouchableOpacity onPress={this._onPressshow.bind(this)} style={{position:'absolute',top:0,left:0,width:100,height:100}}>
                <View style={{position:'absolute',top:0,left:0,width:100,height:100}}></View>
            </TouchableOpacity>
           <Image style={styles.topicon} source={require('./image/logo.png')}/>
           {this.state.show?
                <View style={[styles.inputtext]}>
                <TextInput style={{height: 40,width:300}} placeholder="请输入ip地址" onChangeText={(text) => {
                    storage.save({
                        key: 'userinfo', // 注意:请不要在key中使用_下划线符号!
                        data: {
                            ip:text
                        }
                    });
                    this.setState({ip:text})
                    }
                }
                value={this.state.ip}
                placeholderTextColor='#A9A9A9'
                underlineColorAndroid="transparent"
                />
            </View>
            :null} 
            <View style={[styles.inputtext]}>
                <TextInput
                style={{height: 40,width:300}}
                placeholder="请输用户名"
                onChangeText={(text) => this.setState({username:text})}
                value={this.state.username}
                placeholderTextColor='#A9A9A9'
                underlineColorAndroid="transparent"
                />
            </View>
            <View style={[styles.inputtext]}>
                <TextInput
                style={{height: 40,width:300}}
                placeholder="请输入用户密码"
                onChangeText={(text) => this.setState({password:text})}
                underlineColorAndroid="transparent"
                placeholderTextColor='#A9A9A9'
                value={this.state.password}
                />
            </View>
            <TouchableOpacity onPress={this._onPressButton.bind(this)}>
                <View style={[styles.btncls]}>
                    <Text style={[styles.fontColor2]}>登录</Text>
                </View>
            </TouchableOpacity>
        </View>
        )
    }
}
const styles = StyleSheet.create({
    main:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputtext:{
        borderRadius: 5,
        marginTop: 5,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor:'#F2f2f2',
        opacity:0.9,
        flexDirection: 'row',
        alignItems:'center',

    },
    btncls:{
        borderColor:'#1890ff',
        borderWidth: 1,
        borderRadius: 5,
        marginTop: 10,
        width:100,
        height:50,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#1890ff',
        opacity:0.9,


    },
    fontColor:{
        color:'#ffffff'
    },
    fontColor2:{
        color:'#ffffff',
        fontSize: 24,
        fontWeight: 'bold',
    },
    topicon:{
        position:'absolute',
        //left:10,
        width:Dimensions.get('window').width-100,
        height:Dimensions.get('window').height-100
    },
    inputicon:{
        width:25,
        height:25,
        marginRight: 10,
    }


})